<!-- 热区组件 -->
<template>
	<view class="me-area" :id="viewId">
		<slot></slot>
		<me-area-item v-for="(area,i) in areas" :key="area._id" :no="i" :area="area" :cur="curArea" @del="del(area._id)" @click="itemClick"></me-area-item>
	</view>
</template>

<script>
	import MeAreaItem from './me-area-item.vue'
	export default {
		components:{
			MeAreaItem
		},
		props:{
			areas: {
				type: Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				viewId: 'id_' + Math.random().toString(36).substr(2,16), // 随机生成id
				moveable: false,
				pullable: false,
				hasmove: false,
				curArea: {}
			}
		},
		mounted() {
			// 添加点击事件, 因为@mouse事件会丢失坐标信息
			this.dom = document.getElementById(this.viewId)
			this.dom.addEventListener('mousedown', this.startEvent)
			this.dom.addEventListener('mousemove', this.moveEvent)
			this.dom.addEventListener('mouseup', this.endEvent)
			this.dom.addEventListener('mouseleave', this.endEvent)
		},
		methods: {
			// 点击
			startEvent(e){
				let _id;
				this.moveable = e.target.classList.contains('me-area-item') // 可拖动
				if(this.moveable) _id = e.target.getAttribute('_id');
				this.pullable = e.target.classList.contains('btn-pull') // 可拉伸
				if(this.pullable) _id = e.target.parentNode.getAttribute('_id');
				if(_id) this.curArea = this.areas.find(val=>val._id == _id) || {}
				this.lastPoint = this.getPoint(e)
				this.hasmove = false
			},
			// 拖动
			moveEvent(e){
				if(this.moveable){
					// 拖动
					let curPoint = this.getPoint(e)
					let diffX = curPoint.x - this.lastPoint.x
					let diffY = curPoint.y - this.lastPoint.y
					this.curArea.left += diffX
					this.curArea.top += diffY
					if(this.curArea.left<0){
						this.curArea.left=0
					}else if(this.curArea.left>this.dom.clientWidth){
						this.curArea.left = this.dom.clientWidth
					}
					if(this.curArea.top<0){
						this.curArea.top=0
					}else if(this.curArea.top>this.dom.clientHeight){
						this.curArea.top=this.dom.clientHeight
					}
					this.lastPoint = curPoint
					this.hasmove = true
					e.preventDefault()
				}else if(this.pullable){
					// 拉伸
					let curPoint = this.getPoint(e)
					let diffX = curPoint.x - this.lastPoint.x
					let diffY = curPoint.y - this.lastPoint.y
					this.curArea.w += diffX
					this.curArea.h += diffY
					this.lastPoint = curPoint
					this.hasmove = true
					e.preventDefault()
				}
			},
			// 结束
			endEvent(e){
				this.moveable = false
				this.pullable = false
			},
			// 删除
			del(_id){
				this.areas.splice(this.areas.findIndex(val=>val._id==_id), 1)
			},
			// 获取坐标点
			getPoint(e){
				if (e.touches && e.touches[0]) {
					return {x: e.touches[0].pageX,y: e.touches[0].pageY}
				} else if (e.changedTouches && e.changedTouches[0]) {
					return {x: e.changedTouches[0].pageX,y: e.changedTouches[0].pageY}
				} else {
					return {x: e.clientX,y: e.clientY}
				}
			},
			// 热区的点击事件
			itemClick(e){
				!this.hasmove && this.$emit('item-click', e)
			}
		}
	}
</script>

<style lang="scss">
	.me-area{
		position: relative;
	}
</style>
